export default class DatePicker {
  constructor() {
    this.yearEl = document.querySelector('#yearPicker .picker-list');
    this.monthEl = document.querySelector('#monthPicker .picker-list');
    this.dayEl = document.querySelector('#dayPicker .picker-list');
    this.hourEl = document.querySelector('#hourPicker .picker-list');
    this.minuteEl = document.querySelector('#minutePicker .picker-list');
    this.secondEl = document.querySelector('#secondPicker .picker-list');

    this.initYears();
    this.initMonths();
    this.initDays();
    this.initHours();
    this.initMinutes();
    this.initSeconds();

    this.setupListeners();
  }

  initYears() {
    let html = '';
    for (let i = 1990; i <= 2010; i++) {
      html += `<div class="picker-item" data-value="${i}">${i}</div>`;
    }
    this.yearEl.innerHTML = html;
  }

  initMonths() {
    let html = '';
    for (let i = 1; i <= 12; i++) {
      let month = i.toString().padStart(2, '0');
      html += `<div class="picker-item" data-value="${month}">${month}</div>`;
    }
    this.monthEl.innerHTML = html;
  }

  initDays() {
    let html = '';
    for (let i = 1; i <= 31; i++) {
      let day = i.toString().padStart(2, '0');
      html += `<div class="picker-item" data-value="${day}">${day}</div>`;
    }
    this.dayEl.innerHTML = html;
  }

  initHours() {
    let html = '';
    for (let i = 0; i < 24; i++) {
      html += `<div class="picker-item" data-value="${i.toString().padStart(2, '0')}">${i.toString().padStart(2, '0')}</div>`;
    }
    this.hourEl.innerHTML = html;
  }

  initMinutes() {
    let html = '';
    for (let i = 0; i < 60; i++) {
      html += `<div class="picker-item" data-value="${i.toString().padStart(2, '0')}">${i.toString().padStart(2, '0')}</div>`;
    }
    this.minuteEl.innerHTML = html;
  }

  initSeconds() {
    let html = '';
    for (let i = 0; i < 60; i++) {
      html += `<div class="picker-item" data-value="${i.toString().padStart(2, '0')}">${i.toString().padStart(2, '0')}</div>`;
    }
    this.secondEl.innerHTML = html;
  }

  setupListeners() {
    [this.yearEl, this.monthEl, this.dayEl, this.hourEl, this.minuteEl, this.secondEl].forEach(el => {
      let startY = 0;
      let currentY = 0;
      let lastY = 0;

      el.addEventListener('touchstart', (e) => {
        startY = e.touches[0].pageY;
        lastY = el.scrollTop;
      });

      el.addEventListener('touchmove', (e) => {
        currentY = e.touches[0].pageY;
        ;
        let diff = startY - currentY;
        el.scrollTop = lastY + diff;

        e.preventDefault();
      });

      el.addEventListener('touchend', () => {
        let itemHeight = 40;
        let remainder = el.scrollTop % itemHeight;
        let target = remainder > itemHeight / 2 ?
          el.scrollTop + (itemHeight - remainder) :
          el.scrollTop - remainder;
        document.title = target
        el.scrollTo({
          top: target,
          behavior: 'smooth'
        });

        this.updateSelection(el);
      });
    });
  }

  updateSelection(el) {
    const items = el.querySelectorAll('.picker-item');
    const itemHeight = 40;
    const centerIndex = Math.round(el.scrollTop / itemHeight);

    items.forEach((item, index) => {
      item.classList.remove('selected', 'dim');
      if (index === centerIndex) {
        item.classList.add('selected');
      } else {
        item.classList.add('dim');
      }
    });
  }
}

// 初始化日期选择器
//new DatePicker();